<template>
	<view class="gradens-yhrw-zxview">
		<view class="gradens-yhrw-view-card">
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">计划名称:</view>
				<text class="yhrw-view-list-text">{{planInfo.planName || '暂无数据'}}</text>
			</view>			
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">养护单位:</view>
				<text class="yhrw-view-list-text">{{planInfo.unit  || '暂无数据'}}</text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">起止时间:</view>
				<text class="yhrw-view-list-text">{{planInfo.startTime | date('yyyy/mm/dd')}} ~ {{planInfo.endTime | date('yyyy/mm/dd')}}</text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">任务状态:</view>
				<text
					class="yhrw-view-list-text">{{planInfo.remark?planInfo.remark:parseTimeType(planInfo.startTime,planInfo.endTime)}}</text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">专项内容:</view>
				<text class="yhrw-view-list-text">
					<dict-tag :options="dicts.relevance_type_name" :value="planInfo.relevanceTypeName" /></text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">填报日期:</view>
				<text class="yhrw-view-list-text">{{planInfo.rptTime  || '暂无数据'}} </text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">填报人:</view>
				<text class="yhrw-view-list-text">{{planInfo.userNames  || '暂无数据'}} </text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">养护内容:</view>
				<text class="yhrw-view-list-text">{{planInfo.maintainPlanContent  || '暂无数据'}} </text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">上传图片:</view>
				<view v-for="(item,index) in imgList" :key="item.attachId" style="margin-right: 20rpx;">
					<img class="img" :src="item.src" alt="" srcset="" @click="previewImg(index)">
				</view>
				<view v-if="imgList.length == 0"  class="yhrw-view-list-text">暂无图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tableData from './tableData.js'
	import {
		getMaintainSpecialPlan
	} from '@/api/comp/maintainSpecialPlan'
	import {
		listMaintainSpecialFill
	} from '@/api/comp/maintainSpecialFill'
	import {
		getAttachList
	} from "@/api/dums/am/attach";
	import dictTag from "@/components/dict-tag"
	import {
		baseUrl
	} from "@/config"
	export default {
		dicts: ['relevance_type_name'],
		components: {
			dictTag
		},
		data() {
			return {
				date: new Date(),
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				// showCalendar: false,
				planInfo: {},
				imgList: [],
			}
		},
		onLoad(options) {
			this.selectedIndexs = []
			this.getData(1)
			this.getInfo(options)
		},
		methods: {
			async getInfo(options) {
				let planlist = await getMaintainSpecialPlan(options.id)
				this.planInfo = planlist.data
				listMaintainSpecialFill({
					planId: options.id
				}).then(res => {
					if (res.rows.length) {
						this.$set(this.planInfo, 'rptTime', res.rows[0].rptTime || '')
						this.$set(this.planInfo, 'maintainPlanContent', res.rows[0].maintainPlanContent || '')
					}
				})
				getAttachList({
					mianId: this.planInfo.id,
					bussType: "td_comp_maintain_special_fill",
				}).then(res => {
					this.imgList = res.rows
					this.imgList.map(item => {
						item.src = baseUrl + '/file/' + item.fileUrl
					})
				})
			},
			parseTimeType(startDateTime, endDateTime) {
				let startTime = new Date(startDateTime).getTime();
				let endTime = new Date(endDateTime).getTime();
				let todayTime = new Date().getTime();
				if (startTime > todayTime) {
					this.planStatus = false
					return "未开始";
				} else if (
					startTime <= todayTime &&
					startTime <= endTime &&
					todayTime <= endTime
				) {
					this.planStatus = true
					return "已开始";
				} else if (todayTime > endTime) {
					this.planStatus = false
					return "已结束";
				}
			},
			previewImg(index) {
				// console.log(this.tempFiles);
				// 过滤
				let imgUrl = this.imgList.map(item => item.src)
				// console.log(imgUrl);
				uni.previewImage({
					current: index, //点击的索引值
					urls: imgUrl,
				})
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			backClick() {
				uni.navigateBack()
			},
			gopath() {
				uni.navigateTo({
					url: '/pages/gardens/yhrw/zxviewctx'
				})
			}
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.gradens-yhrw-view-card {
		box-sizing: border-box;
		padding: 10rpx 10px;
	}

	.gradens-yhrw-zxview {
		.yhrw-view-list-item {
			display: flex;
			padding-top: 20rpx;
			align-items: center;

			.yhrw-view-list-name {
				width: 125rpx;
				margin-right: 20rpx;
				color:#9DA0AA;
				font-size: 24rpx;
			}

			.yhrw-view-list-text {
				flex: 1;
				color:#353B50;
				font-size: 24rpx;
			}

			.img {
				width: 150rpx;
				height: 150rpx;
				object-fit: cover;
			}
		}
	}
</style>